<template>
    <div class="add-custom-wrap">
      <div class="auto">
        <div class="search-box position-relative">
          <input type="text" placeholder="请输入你想定制的话题" v-model.trim="searchStr" @keyup.enter="search">
          <button @click="search">
            <img src="../../assets/svg/btn-search.svg" alt="">
          </button>
        </div>
        <div class="" v-if="result">
          <ul class="result-wrap" v-if="list.length">
            <li v-for="item in list">
              <div class="type">{{item.name}}</div>
              <ul class="result-list">
                <li v-for="child in item.list" :class="{ selected: child.checked }" @click="follow(child)">
                  <p>
                    <img :src="child.logo" alt="">
                  </p>
                  <div>
                    <p class="name">{{child.desc[0]}}</p>
                    <p class="position">{{child.desc[1]}}</p>
                    <p class="company">{{child.desc[2]}}</p>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
          <p v-else class="not-data text-center">对不起暂时没有您想要的数据，请换个关键字试试</p>
        </div>
        <div class="text-center not-result" v-else>
          <p class="position-relative">
            <span class="position-absolute">
              <img src="../../assets/images/custom-made-up.png" alt="">
            </span>
          </p>
          <p>
            <img src="../../assets/images/custom-made-zwdznr.png" alt="">
          </p>
        </div>
      </div>
    </div>
</template>
<script>
  import request from '../../../api/request'
  export default {
    name: 'add',
    data () {
      return {
        result: false,
        searchStr: '',
        list: [],
        request: true
      }
    },
    methods: {
      search () {
        if (this.searchStr) {
          request.post('keywordSearch', {keyword: this.searchStr}).then((response) => {
            this.result = true
            if (response.data.code === '200') {
              this.list = response.data.data.result
            }
          })
        }
      },
      follow (data) {
        if (this.request) {
          this.request = false
          request.post('submitSubscribe', { 'keyword_id': data.keyword_id, 'do': data.checked }).then((response) => {
            if (response.data.code === '200') {
              this.request = true
              if (data.checked === 1) {
                data.checked = 0
              } else {
                data.checked = 1
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  @keyframes customBottom
  {
    from {transform:translateY(0);}
    to {transform:translateY(-10px);}
    0% {
      transform:translateY(0)
    }
    50% {
      transform:translateY(-5px)
    }
    100% {
      transform:translateY(-10px)
    }
  }
  .custom-wrap{
    .add-custom-wrap{
      >div{
        width:800px;
      }
     .search-box{
       padding-top:50px;
       input{
         display: block;
         width:100%;
         padding:10px 40px;
         font-size: 16px;
         border:1px solid #00ba91;
       }
       button{
         position: absolute;
         display: block;
         width:40px;
         height:40px;
         right:0;
         bottom:0;
         border:none;
         background-color: #00ba91;
         cursor: pointer;
       }
     }
      .not-result{
        p{
          padding:25px 0;
        }
        span{
          animation: customBottom 0.4s 0.12s infinite alternate;
        }
      }
      .result-wrap{
        width:100%;
        >li{
          display: flex;
        }
        .type{
          text-align: center;
          width: 28px;
          height: 90px;
          font-size: 14px;
          color: #7c838d;
          background-color: #e9edf2;
          display: flex;
          align-items: center;
        }
        .result-list{
          display: flex;
          width:775px;
          align-items: center;
          border-bottom: 1px solid #e9edf2;
          border-right: 1px solid #e9edf2;
          li{
            width:25%;
            padding-left:25px;
            display: flex;
            cursor: pointer;
            position: relative;
            &.selected{
              &:after{
                content:'';
                position: absolute;
                right:0;
                top:0;
                display: block;
                width:30px;
                height:30px;
                background: url(../../assets/images/interest-choose-pitchon.png) no-repeat;
                background-size: contain;
              }
            }
            img{
              width:52px;
              height:52px;
            }
            >div{
              padding:5px 0 0 8px;
              width:116px;
              p{
                width:100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .name{
            width:78%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            color: #00ba91;
          }
          .position,.company{
            font-size: 12px;
            color: #727a84;
            margin-top:3px;
          }
        }
      }
    }
  }
</style>
